/* =========================================================
   MOBILE OVERRIDES
   این فایل فقط برای همین بازه‌های دیوایس لود میشه.
   نکته: بلوک‌های کامنت‌شده رو بعد از تست، از کامنت دربیار.
========================================================= */
.hero {
   background-image: url("../../img/hero-bg-mobile.webp");
    background-position: top center;
    min-height: 850px;
  }
  /* NAV PILL */
.hero-nav-pill {
  background: rgba(255, 254, 254, 0.94);
  padding: 0.2rem 0.45rem;
 
 
  box-shadow: 0 15px 30px rgba(234, 231, 231, 0.18);
opacity: 0.8;

  
}
  .hero-service-card{
    left: 80PX;
    /* انتقال به سمت راست برج */
    margin-right: 0;
    margin-left: 10px;  /* فاصله از برج (۱۰px) */
  }
 
 
  .hero-logo img{
    width: 80.00006103515625px;
    height: 16.1419734954834px;
    opacity: 1;
    left: 24px;
  }

  .Header-Line{
    width: 145.00001560745773;
    opacity: 1;
    top: 41.99px;
    left: 10px;
    border-width: 1px;
    margin-left: 60px;
  }

  .hero-btn-start{
    width: 134px;
    height: 48px;
    opacity: 1;
    top: 264px;
    left: 24px;
    border-radius: 20px;
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
    gap: 8px;
    /*text*/
    font-family: Avenir;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
  }

  .hero-kicker{
    font-family: Avenir;
    font-weight: 400;
    font-style: Roman;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 100%;
    letter-spacing: 0px;
  }

  .hero-title{
    font-family: Avenir;
    font-weight: 900;
    font-style: Black;
    font-size: 36px !important;
    line-height: 100%;
    letter-spacing: 0px;
  }

  .hero-subtitle{
    font-family: Avenir;
    font-weight: 400;
    font-style: Roman;
    font-size: 18px;
    line-height: 2rem !important;
    letter-spacing: 0px;
  }
  .hero-services-list{
  top: var(--services-top);
  right: var(--services-right);
  gap: 7px;
}
.hero-nav-pill .nav-link {

  color: white !important;
}
/*------------------------------------- Start Default value-------------------------------------------------*/
.hero-service-icon:nth-child(1){ --icon-x: var(--icon1-x); }
.hero-service-icon:nth-child(2){ --icon-x: var(--icon2-x); }
.hero-service-icon:nth-child(3){ --icon-x: var(--icon3-x); }
.hero-service-icon:nth-child(4){ --icon-x: var(--icon4-x); }
.hero-service-icon:nth-child(5){ --icon-x: var(--icon5-x); }
.hero-service-icon:nth-child(6){ --icon-x: var(--icon6-x); }
.hero-service-icon:nth-child(7){ --icon-x: var(--icon7-x); }

:root{
     /* hero services positioning */
    --services-top: 270px;
    --services-right: 238px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  }
     .hero-header{margin-bottom: 10px !important;}
  
  .hero-content {
    max-width: 300px !important;
  }  
   .cu-title{
    font-size: 28px !important;
    margin-bottom: 30px;
    font-weight: 500 !important;
  }
      .cu-label, .cu-value {
        font-size: 16px;
        line-height: 1.35;
    }
  /*------------------------------------- End Default value-------------------------------------------------*/
  
  /*=================================End Base =========================================*/


 /*=================== START: Mobile Very Small | 320–359 ===================*/
/* Devices: iPhone SE (1st gen), iPhone 5/5S/5C, Samsung Galaxy J1/J2, Android Go phones, old low-end Androids */
 /*=================== START: Mobile Very Small | 320–324 ===================*/
/* Devices: very small Android phones, old low-end devices */
@media (min-width: 320px) and (max-width: 324.98px){
:root{
     /* hero services positioning */
    --services-top: 275px;
    --services-right: 215px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
           }
/*=================== END: Mobile Very Small | 320–324 ===================*/


/*=================== START: Mobile Very Small | 325–329 ===================*/
/* Devices: compact Android phones, old budget models */
@media (min-width: 325px) and (max-width: 329.98px){
   :root{
     /* hero services positioning */
    --services-top: 241px;
    --services-right: 215px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
/*=================== END: Mobile Very Small | 325–329 ===================*/


/*=================== START: Mobile Very Small | 330–334 ===================*/
/* Devices: small Android phones, legacy devices */
@media (min-width: 330px) and (max-width: 334.98px){
 :root{
     /* hero services positioning */
    --services-top: 241px;
    --services-right: 218px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
/*=================== END: Mobile Very Small | 330–334 ===================*/


/*=================== START: Mobile Very Small | 335–339 ===================*/
/* Devices: older Android phones, compact screens */
@media (min-width: 335px) and (max-width: 339.98px){
  :root{
     /* hero services positioning */
    --services-top: 241px;
    --services-right: 223px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
 
/*=================== END: Mobile Very Small | 335–339 ===================*/


/*=================== START: Mobile Very Small | 340–344 ===================*/
/* Devices: small-screen Android devices */
@media (min-width: 340px) and (max-width: 344.98px){
  :root{
     /* hero services positioning */
    --services-top: 245px;
    --services-right: 227px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
 
/*=================== END: Mobile Very Small | 340–344 ===================*/


/*=================== START: Mobile Very Small | 345–349 ===================*/
/* Devices: compact Android phones */
@media (min-width: 345px) and (max-width: 349.98px){
  :root{
     /* hero services positioning */
    --services-top: 258px;
    --services-right: 229px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
 
}
/*=================== END: Mobile Very Small | 345–349 ===================*/


/*=================== START: Mobile Very Small | 350–354 ===================*/
/* Devices: small Android phones, last generation low-end */
@media (min-width: 350px) and (max-width: 354.98px){
:root{
     /* hero services positioning */
    --services-top: 270px;
    --services-right: 230px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
/*=================== END: Mobile Very Small | 350–354 ===================*/


/*=================== START: Mobile Very Small | 355–359 ===================*/
/* Devices: edge of standard mobile size, compact phones */
@media (min-width: 355px) and (max-width: 359.98px){
 :root{
     /* hero services positioning */
    --services-top: 270px;
    --services-right: 234px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;}
}
/*########################### END: Mobile Very Small | 320–359 ###########################*/





/*=================== START: Mobile Standard (Primary) | 360–389 ===================*/
/* Devices: iPhone 11, iPhone 12/13/14 (standard), Galaxy A10/A20/A30/A50, Galaxy S8–S21, Redmi Note 8–11, Poco X3/X4/X5 */
/*=================== START: Mobile Standard (Primary)| 360–364 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 360px) and (max-width: 364.98px){
 :root{
     /* hero services positioning */
    --services-top: 270px;
    --services-right: 234px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 360–364 ===================*/


/*=================== START: Mobile Standard (Primary)| 365–369 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 365px) and (max-width: 369.98px){
  :root{
     /* hero services positioning */
    --services-top: 270px;
    --services-right: 234px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 365–369 ===================*/


/*=================== START: Mobile Standard (Primary)| 370–374 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 370px) and (max-width: 374.98px){
:root{
     /* hero services positioning */
    --services-top: 275px;
    --services-right: 240px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 370–374 ===================*/


/*=================== START: Mobile Standard (Primary)| 375–379 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 375px) and (max-width: 379.98px){
  :root{
     /* hero services positioning */
    --services-top: 290px;
    --services-right: 245px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 375–379 ===================*/


/*=================== START: Mobile Standard (Primary)| 380–384 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 380px) and (max-width: 384.98px){
:root{
     /* hero services positioning */
    --services-top: 295px;
    --services-right: 245px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 380–384 ===================*/


/*=================== START: Mobile Standard (Primary)| 385–389 ===================*/
/* Devices: compact smartphones, fine-grained layout tuning */
@media (min-width: 385px) and (max-width: 389.98px){
:root{
     /* hero services positioning */
    --services-top: 290px;
    --services-right: 250px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 385–389 ===================*/


/*=================== START: Mobile Standard (Primary)| 390–394 ===================*/
/* Devices: standard smartphones, refined spacing adjustments */
@media (min-width: 390px) and (max-width: 394.98px){
 :root{
     /* hero services positioning */
    --services-top: 290px;
    --services-right: 250px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 390–394 ===================*/


/*=================== START: Mobile Standard (Primary)| 395–399 ===================*/
/* Devices: standard smartphones, refined spacing adjustments */
@media (min-width: 395px) and (max-width: 399.98px){
  :root{
     /* hero services positioning */
    --services-top: 300px;
    --services-right: 256px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 395–399 ===================*/


/*=================== START: Mobile Standard (Primary)| 400–404 ===================*/
/* Devices: large smartphones, edge of mobile-to-large range */
@media (min-width: 400px) and (max-width: 404.98px){

:root{
     /* hero services positioning */
    --services-top: 300px;
    --services-right: 255px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Standard (Primary)| 400–404 ===================*/

/*=================== END: Mobile Standard (Primary) | 360–389 ===================*/








/*=================== START: Mobile Large | 390–419 ===================*/
/* Devices: Google Pixel 6/6a/7/7a/8, iPhone 12 Pro, iPhone 13 Pro, iPhone 14 Pro, iPhone 15 Pro, Galaxy S22/S23/S24 */
 /*=================== START: large smartphones Step | 405–409 ===================*/
/* Devices: large smartphones, fine-grained layout tuning */
@media (min-width: 405px) and (max-width: 409.98px){
  :root{
     /* hero services positioning */
    --services-top: 305px;
    --services-right: 260px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: large smartphones Step | 405–409 ===================*/


/*=================== START: large smartphones Step | 410–414 ===================*/
/* Devices: large smartphones, fine-grained layout tuning */
@media (min-width: 410px) and (max-width: 414.98px){
     :root{
     /* hero services positioning */
    --services-top: 308px;
    --services-right: 266px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: large smartphones Step | 410–414 ===================*/


/*=================== START: large smartphones Step | 415–419 ===================*/
/* Devices: large smartphones, edge of mobile-to-tablet range */
@media (min-width: 415px) and (max-width: 419.98px){
     :root{
     /* hero services positioning */
    --services-top: 313px;
    --services-right: 268px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: large smartphones Step | 415–419 ===================*/

/*=================== END: Mobile Large | 390–419 ===================*/


/*=================== START: Mobile Extra Large (Plus / Max) | 420–479 ===================*/
/* Devices: iPhone 12/13/14/15 Pro Max, Galaxy S21/S22/S23/S24 Ultra, OnePlus 10/11/12 Pro, Xiaomi Ultra series */
/*=================== START: Mobile Extra Large Step | 420–424 ===================*/
/* Devices: large smartphones (Plus / Max), fine-grained layout tuning */
@media (min-width: 420px) and (max-width: 424.98px){
      :root{
     /* hero services positioning */
    --services-top: 312px;
    --services-right: 270px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 420–424 ===================*/


/*=================== START: Mobile Extra Large Step | 425–429 ===================*/
/* Devices: large smartphones (Plus / Max), fine-grained layout tuning */
@media (min-width: 425px) and (max-width: 429.98px){
     :root{
     /* hero services positioning */
    --services-top: 325px;
    --services-right: 272px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 425–429 ===================*/


/*=================== START: Mobile Extra Large Step | 430–434 ===================*/
/* Devices: large smartphones (Plus / Max), fine-grained layout tuning */
@media (min-width: 430px) and (max-width: 434.98px){
      :root{
     /* hero services positioning */
    --services-top: 323px;
    --services-right: 275px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 430–434 ===================*/


/*=================== START: Mobile Extra Large Step | 435–439 ===================*/
/* Devices: large smartphones (Plus / Max), fine-grained layout tuning */
@media (min-width: 435px) and (max-width: 439.98px){
      :root{
     /* hero services positioning */
    --services-top: 323px;
    --services-right: 277px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 435–439 ===================*/


/*=================== START: Mobile Extra Large Step | 440–444 ===================*/
/* Devices: large smartphones (Plus / Max), refined spacing adjustments */
@media (min-width: 440px) and (max-width: 444.98px){
        :root{
     /* hero services positioning */
    --services-top: 330px;
    --services-right: 282px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 440–444 ===================*/


/*=================== START: Mobile Extra Large Step | 445–449 ===================*/
/* Devices: large smartphones (Plus / Max), refined spacing adjustments */
@media (min-width: 445px) and (max-width: 449.98px){
          :root{
     /* hero services positioning */
    --services-top: 330px;
    --services-right: 285px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 445–449 ===================*/


/*=================== START: Mobile Extra Large Step | 450–454 ===================*/
/* Devices: large smartphones (Plus / Max), refined spacing adjustments */
@media (min-width: 450px) and (max-width: 454.98px){
          :root{
     /* hero services positioning */
    --services-top: 335px;
    --services-right: 285px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 450–454 ===================*/


/*=================== START: Mobile Extra Large Step | 455–459 ===================*/
/* Devices: large smartphones (Plus / Max), refined spacing adjustments */
@media (min-width: 455px) and (max-width: 459.98px){
         :root{
     /* hero services positioning */
    --services-top: 337px;
    --services-right: 286px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 455–459 ===================*/


/*=================== START: Mobile Extra Large Step | 460–464 ===================*/
/* Devices: large smartphones (Plus / Max), near tablet threshold */
@media (min-width: 460px) and (max-width: 464.98px){
         :root{
     /* hero services positioning */
    --services-top: 341px;
    --services-right: 289px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 460–464 ===================*/


/*=================== START: Mobile Extra Large Step | 465–469 ===================*/
/* Devices: large smartphones (Plus / Max), near tablet threshold */
@media (min-width: 465px) and (max-width: 469.98px){
        :root{
     /* hero services positioning */
    --services-top: 347px;
    --services-right: 297px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 465–469 ===================*/


/*=================== START: Mobile Extra Large Step | 470–474 ===================*/
/* Devices: large smartphones (Plus / Max), near tablet threshold */
@media (min-width: 470px) and (max-width: 474.98px){
         :root{
     /* hero services positioning */
    --services-top: 351px;
    --services-right: 302px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 470–474 ===================*/


/*=================== START: Mobile Extra Large Step | 475–479 ===================*/
/* Devices: large smartphones (Plus / Max), upper mobile boundary */
@media (min-width: 475px) and (max-width: 479.98px){
           :root{
     /* hero services positioning */
    --services-top: 357px;
    --services-right: 303px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile Extra Large Step | 475–479 ===================*/

/*=================== END: Mobile Extra Large (Plus / Max) | 420–479 ===================*/


/*=================== START: Phablet / Fold (Closed) | 480–575 ===================*/
/* Devices: Galaxy Z Fold 2/3/4/5 (closed), Huawei Mate X (closed), Honor Magic V (closed), large foldable phones */
 /*=================== START: Mobile XL Step | 480–484 ===================*/
/* Devices: large smartphones, entry to phablet range */
@media (min-width: 480px) and (max-width: 484.98px){
           :root{
     /* hero services positioning */
    --services-top: 357px;
    --services-right: 305px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
} 
}
/*=================== END: Mobile XL Step | 480–484 ===================*/


/*=================== START: Mobile XL Step | 485–489 ===================*/
/* Devices: large smartphones, entry to phablet range */
@media (min-width: 485px) and (max-width: 489.98px){
            :root{
     /* hero services positioning */
    --services-top: 365px;
    --services-right: 308px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile XL Step | 485–489 ===================*/


/*=================== START: Mobile XL Step | 490–494 ===================*/
/* Devices: phablets, fine-grained layout tuning */
@media (min-width: 490px) and (max-width: 494.98px){
         :root{
     /* hero services positioning */
    --services-top: 370px;
    --services-right: 310px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile XL Step | 490–494 ===================*/


/*=================== START: Mobile XL Step | 495–499 ===================*/
/* Devices: phablets, fine-grained layout tuning */
@media (min-width: 495px) and (max-width: 499.98px){
   :root{
     /* hero services positioning */
    --services-top: 378px;
    --services-right: 315px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
   .hero-header{margin-bottom: 2px !important;}
.hero-title{font-size: 30px !important;}

.hero-subtitle{margin-bottom: 5px !important;}
    .hero-btn-start {
        width: 124px;
        height: 48px;       
       margin-top: 5px;
      padding-top: 12px;
      font-size: 12px !important;
}
}
/*=================== END: Mobile XL Step | 495–499 ===================*/


/*=================== START: Mobile XL Step | 500–504 ===================*/
/* Devices: phablets, refined spacing adjustments */
@media (min-width: 500px) and (max-width: 504.98px){
   :root{
     /* hero services positioning */
    --services-top: 380px;
    --services-right: 320px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
 
}
/*=================== END: Mobile XL Step | 500–504 ===================*/


/*=================== START: Mobile XL Step | 505–509 ===================*/
/* Devices: phablets, refined spacing adjustments */
@media (min-width: 505px) and (max-width: 509.98px){
  :root{
     /* hero services positioning */
    --services-top: 388px;
    --services-right: 320px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 505–509 ===================*/


/*=================== START: Mobile XL Step | 510–514 ===================*/
/* Devices: phablets, near tablet threshold */
@media (min-width: 510px) and (max-width: 514.98px){
 :root{
     /* hero services positioning */
    --services-top: 398px;
    --services-right: 322px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 510–514 ===================*/


/*=================== START: Mobile XL Step | 515–519 ===================*/
/* Devices: phablets, near tablet threshold */
@media (min-width: 515px) and (max-width: 519.98px){
 :root{
     /* hero services positioning */
    --services-top: 405px;
    --services-right: 329px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 515–519 ===================*/


/*=================== START: Mobile XL Step | 520–524 ===================*/
/* Devices: phablets, upper mobile boundary */
@media (min-width: 520px) and (max-width: 524.98px){
  :root{
     /* hero services positioning */
    --services-top: 400px;
    --services-right: 330px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 520–524 ===================*/


/*=================== START: Mobile XL Step | 525–529 ===================*/
/* Devices: phablets, upper mobile boundary */
@media (min-width: 525px) and (max-width: 529.98px){
  :root{
     /* hero services positioning */
    --services-top: 398px;
    --services-right: 330px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 525–529 ===================*/


/*=================== START: Mobile XL Step | 530–534 ===================*/
/* Devices: phablets, approaching tablet range */
@media (min-width: 530px) and (max-width: 534.98px){
   .hero {min-height: 809px;}
    :root{
     /* hero services positioning */
       
    --services-top: 403px;
    --services-right: 332px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 530–534 ===================*/


/*=================== START: Mobile XL Step | 535–539 ===================*/
/* Devices: phablets, approaching tablet range */
@media (min-width: 535px) and (max-width: 539.98px){
    /* hero services positioning */
     .hero {min-height: 809px;}
    :root{
     /* hero services positioning */
       
    --services-top: 403px;
    --services-right: 334px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 535–539 ===================*/


/*=================== START: Mobile XL Step | 540–544 ===================*/
/* Devices: phablets, approaching tablet range */
@media (min-width: 540px) and (max-width: 544.98px){
    /* hero services positioning */
     .hero {min-height: 830px;}
    :root{
     /* hero services positioning */
       
    --services-top: 408px;
    --services-right: 337px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 540–544 ===================*/


/*=================== START: Mobile XL Step | 545–549 ===================*/
/* Devices: phablets, tablet crossover */
@media (min-width: 545px) and (max-width: 549.98px){
   .hero {min-height: 890px;}
    :root{
     /* hero services positioning */
       
    --services-top: 413px;
    --services-right: 345px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 545–549 ===================*/


/*=================== START: Mobile XL Step | 550–554 ===================*/
/* Devices: phablets, tablet crossover */
@media (min-width: 550px) and (max-width: 554.98px){
  .hero {min-height: 890px;}
    :root{
     /* hero services positioning */
       
    --services-top: 419px;
    --services-right: 344px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 550–554 ===================*/


/*=================== START: Mobile XL Step | 555–559 ===================*/
/* Devices: phablets, tablet crossover */
@media (min-width: 555px) and (max-width: 559.98px){
  .hero {min-height: 810px;}
    :root{
     /* hero services positioning */
       
    --services-top: 419px;
    --services-right: 344px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 555–559 ===================*/


/*=================== START: Mobile XL Step | 560–564 ===================*/
/* Devices: phablets, near tablet breakpoint */
@media (min-width: 560px) and (max-width: 564.98px){
 .hero {min-height: 810px;}
    :root{
     /* hero services positioning */
       
    --services-top: 429px;
    --services-right: 354px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 560–564 ===================*/


/*=================== START: Mobile XL Step | 565–569 ===================*/
/* Devices: phablets, near tablet breakpoint */
@media (min-width: 565px) and (max-width: 569.98px){
   .hero {min-height: 850px;}
    :root{
     /* hero services positioning */
       
    --services-top: 437px;
    --services-right: 353px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 565–569 ===================*/


/*=================== START: Mobile XL Step | 570–574 ===================*/
/* Devices: phablets, upper edge before tablet */
@media (min-width: 570px) and (max-width: 574.98px){
 .hero {min-height: 880px;}
    :root{
     /* hero services positioning */
       
    --services-top: 437px;
    --services-right: 353px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 570–574 ===================*/


/*=================== START: Mobile XL Step | 575–575 ===================*/
/* Devices: phablets, final mobile pixel range */
@media (min-width: 575px) and (max-width: 575.98px){

    :root{
     /* hero services positioning */
       
    --services-top: 450px;
    --services-right: 360px;

    /* icon horizontal offsets */
    --icon1-x: 45px;
    --icon2-x: 28px;
    --icon3-x:18px;
    --icon4-x: 5px;
    --icon5-x: -5px;
    --icon6-x: -10px;
    --icon7-x: -15px;
  } 
}
/*=================== END: Mobile XL Step | 575–575 ===================*/

/*=================== END: Phablet / Fold (Closed) | 480–575 ===================*/